import create from 'zustand';
import DeviceInfo from 'react-native-device-info';
import type {StateCreator} from 'zustand';
import {devtools, persist} from 'zustand/middleware';
import {zustandStorage} from './index';

export type StatusBarStyle = 'light-content' | 'dark-content';

export type HeaderBlurType = 'light' | 'dark';

export type Appearance = 'light' | 'dark' | 'followSystem';

export type Language = 'zh' | 'en';

interface AppState {
  statusBarStyle: StatusBarStyle;
  setStatusBarStyle: (h: StatusBarStyle) => void;
  headerBlurType: HeaderBlurType;
  setHeaderBlurType: (h: HeaderBlurType) => void;
  appearance: Appearance;
  setAppearance: (h: Appearance) => void;
  language: Language;
  setLanguage: (h: Language) => void;
  deviceType: string;
}

export const name = 'app-store';

const baseStateCreator: StateCreator<AppState> = set => ({
  statusBarStyle: 'dark-content',
  setStatusBarStyle: (h: StatusBarStyle) => {
    set({
      statusBarStyle: h,
    });
  },
  headerBlurType: 'light',
  setHeaderBlurType: (h: HeaderBlurType) => {
    set({
      headerBlurType: h,
    });
  },
  appearance: 'followSystem',
  setAppearance: (h: Appearance) => {
    set({
      appearance: h,
    });
  },
  language: 'zh',
  setLanguage: (h: Language) => {
    set({
      language: h,
    });
  },
  deviceType: DeviceInfo.getDeviceType(),
});

const appGlobalStore = create(
  devtools<AppState>(
    persist<AppState>(baseStateCreator, {
      name,
      getStorage: () => zustandStorage,
    }) as any,
  ),
);

export default appGlobalStore;
